<template>

  <el-table
      :data="TaskList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-style="tableRowClassName"
      :default-sort="{ prop: 'uintID', order: 'ascending' }"

  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="taskId" label="id" width="50"/>
    <el-table-column prop="id" label="序号" width="50"/>
    <el-table-column prop="type" label="任务性质"/>
    <el-table-column prop="startDate" label="任务开始日期" width="200"/>
    <el-table-column prop="process" label="任务进度状态" width="100"/>
    <el-table-column prop="processRate" label="任务进度比例" width="100"/>
    <el-table-column prop="createTime" label="任务创建时间" width="200"/>
    <el-table-column prop="isSet" :formatter="formatArrange" label="是否设置任务" width="50"/>
    <el-table-column label="操作" width="200" align="center">
      <template #default="scope">
<!--        <el-button type="danger" @click="del(scope.row.uintID)">删除</el-button>-->
        <el-button type="primary" @click="showAssignDialog(scope.row.taskId,scope.row.id,scope.row.type)">指派</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加团队选择对话框 -->
  <el-dialog
      title="指派任务到团队"
      v-model="assignDialogVisible"
      @close="handleAssignDialogClose"
  >
    <el-select v-model="selectedTeamId" placeholder="请选择团队">
      <el-option
          v-for="team in teamList"
          :key="team.id"
          :label="team.name"
          :value="team.id"
      ></el-option>
    </el-select>
<!--    日期选择-->
    <el-date-picker
        v-model="PickedDate"
        type="date"
        placeholder="选择日期"
        :disabled-date="disabledDate"
    ></el-date-picker>

    <div slot="footer">
      <el-button @click="handleAssignDialogClose">取消</el-button>
      <el-button type="primary" @click="assignTask(selectedTeamId)">确定指派</el-button>
    </div>
  </el-dialog>

  <div class="pagination-block">
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script setup lang="ts">
// import {Search, DocumentChecked, Delete, Message} from '@element-plus/icons-vue'
import {onMounted, reactive, Ref, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import type {FormRules, FormInstance} from 'element-plus'
import axios from "axios";
import {column} from "element-plus/es/components/table-v2/src/common";

const disabledDate=(time:any)=>{
  // 获取今天的日期，清除时分秒
  let today = new Date();
  today.setHours(0, 0, 0, 0);
  // 禁用今天之前的日期
  return time.getTime() < today.getTime();
}

const title = ref('')
const TaskList = ref([]) //任务列表
let total = ref(1)
let form = ref({})
const selectedTeamId=ref('');
interface Team {
  id: number;
  name: string;
}


// const teamList=ref([]);
const teamList: Ref<Team[]> = ref([]);
const assignDialogVisible=ref(false);
onMounted(()=>{
  getTaskList();//进入时加载任务列表
})
const getTaskList = async () => {
  try {
    const res = await axios.get('http://'+httpLocalHost+'/api/taskArrange/getList');
    TaskList.value = res.data.data;
    console.log("获取的任务列表为:"+res.data.data);
    //刷新表格
  } catch (error) {
    console.error('获取任务列表失败:', error);
  }
};
const formatTeamName = (row:any) =>{
  return getTeamName(row.teamId);

}
const getTeamName=(id:number)=>{
  for(let i=0;i<teamList.value.length;i++){
    if(teamList.value[i].id==id){
      return teamList.value[i].name;
    }
  }
}
const formatArrange=(row:any)=>{
  if(row.isArrange==1){
    return '√';
  }else{
    return 'X';
  }
}
let choosenTaskId=0;
let choosenArrangeTaskId=0;
let choosenType='';
teamList.value=[
  {id:1,name:'大数据团队'},
  {id:2,name:'AI团队'},
  {id:3,name:'数据准备团队'},
  {id:4,name:'数据处理团队'},
  {id:5,name:'其他'},
]
const showAssignDialog=(taskId:any,ArrangeTaskId:any,type:any)=>{
  choosenTaskId=taskId;
  choosenArrangeTaskId=ArrangeTaskId;
  choosenType=type;
  // TODO team团队的接口
  // axios.get('/api/team/list').then((res:any)=>{
  //   teamList.value=res.data.data;
  // })
  //假设接口已经传回数据
  // teamList.value=[
  //   {id:1,name:'大数据团队'},
  //   {id:2,name:'AI团队'},
  //   {id:3,name:'数据准备团队'},
  //   {id:4,name:'数据处理团队'},
  //   {id:5,name:'其他'},
  // ]
  assignDialogVisible.value = true;

}
const handleAssignDialogClose=()=>{
  assignDialogVisible.value = false;
}
interface TaskArrangementForm {
  id: number;
  taskId: number;
  teamId: string;
  startDate: string; // 使用 TypeScript 内置的 Date 类型来表示 LocalDateTime
  process: string;
  processRate: string;
  type: string;
  isArrange: number;
}
// let duration = ref<number>()
let PickedDate=new Date();

const httpLocalHost = 'localhost:9500';
const assignTask=(teamId:any)=>{
  const taskArrangementForm: TaskArrangementForm = {
    id: choosenArrangeTaskId,
    taskId: choosenTaskId,
    teamId:teamId,
    startDate: PickedDate,
    process: '未开始',
    processRate: '0%',
    type:choosenType ,
    isArrange: 1,
  };
  //json化
  var json = JSON.stringify(taskArrangementForm);
  axios.put('http://' + httpLocalHost + '/api/taskArrange/update/'+choosenArrangeTaskId,json,{headers: {'Content-Type': 'application/json'}}).then((res: any) => {
    ElMessage({
      type: 'success',
      message: '指派成功'
    })
    assignDialogVisible.value = false;
    //刷新表格
    getTaskList();

  })

}


</script>


<style scoped>
.ml-5 {
  margin-left: 10px;
}

.pagination-block {
  margin-left: 25%;
}
</style>